<template>
	<view class="record-item" @click="$emit('click')">
		<view class="record-icon" :class="record.type === 1 ? 'income' : 'expense'">
			<text>{{ record.type === 1 ? '+' : '-' }}</text>
		</view>

		<view class="record-content">
			<view class="record-main">
				<text class="category-name">{{ getCategoryName(record.categoryId) }}</text>
				<text class="record-amount" :class="record.type === 1 ? 'income' : 'expense'">
					{{ record.type === 1 ? '+' : '-' }}¥{{ record.amount }}
				</text>
			</view>

			<view class="record-meta">
				<text class="record-date">{{ formatDate(record.recordDate) }}</text>
				<text class="record-remark" v-if="record.remark">{{ record.remark }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		props: {
			record: {
				type: Object,
				required: true
			}
		},

		computed: {
			...mapState(['categories'])
		},

		methods: {
			getCategoryName(categoryId) {
				const category = this.categories.find(cat => cat.id === categoryId);
				return category ? category.name : '未知分类';
			},

			formatDate(date) {
				return this.$date.formatDate(date, 'MM-DD');
			}
		}
	};
</script>

<style scoped>
	.record-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.record-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		margin-right: 30rpx;
	}

	.record-icon.income {
		background-color: #34C759;
	}

	.record-icon.expense {
		background-color: #FF3B30;
	}

	.record-content {
		flex: 1;
	}

	.record-main {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.category-name {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.record-amount {
		font-size: 32rpx;
		font-weight: bold;
	}

	.record-amount.income {
		color: #34C759;
	}

	.record-amount.expense {
		color: #FF3B30;
	}

	.record-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.record-date {
		font-size: 24rpx;
		color: #999;
	}

	.record-remark {
		font-size: 24rpx;
		color: #666;
		max-width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>